<template>
  <div class="watch4">
    <h1>情况四：监视ref或reactive定义的对象类型数据中的某个属性</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>
<script lang="ts" setup>
import { watch, reactive } from "vue";
// 数据
let person = reactive({name: "张三",age: 16,car: { c1: "奔驰", c2: "宝马" },});
// 方法
function changeName() {person.name += "~"}
function changeAge() {person.age += 1;}
function changeC1() {person.car.c1 = "奥迪"}
function changeC2() {person.car.c2 = "保时捷"}
function changeCar() {person.car = { c1: "雅迪", c2: "艾玛" }}
// 监听
// 情况四:监听响应式对象中某个属性,且该属性是基本类型的,要写成函数式
watch(()=>person.name,(newVal,oldVal)=>{
    console.log("person变化了",newVal,oldVal)
})
// 情况四:监听响应式对象中的某个属性,且该属性是对象类型的,可以直接写,也能写成函数
watch(()=>person.car,(newVal,oldVal)=>{
    console.log("person变化了",newVal,oldVal)
},{deep:true})
</script>

<style scoped>
.watch4 {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>